<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input
        v-model="query.dbName"
        clearable
        style="width: 150px; margin-right: 10px"
        size="mini"
        placeholder="请输入库名"
      />
      <el-input
        v-model="query.tableName"
        clearable
        style="width: 150px; margin-right: 10px"
        size="mini"
        placeholder="请输入表名"
      />
      <rrOperation :crud="crud"/>
      <div style="display: inline-block">
        <el-button class="filter-item" icon="el-icon-plus" size="mini" type="primary" @click="crud.toAdd">新增</el-button>
        <el-button class="filter-item" icon="el-icon-delete" size="mini" type="danger"
                   @click="toDelete(crud.selections)">删除
        </el-button>
      </div>
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      border
      max-height="300px"
      @select="crud.selectChange"
      @select-all="crud.selectAllChange"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="40"/>
      <el-table-column label="库名" prop="dbName"/>
      <el-table-column label="表名" prop="tableName"/>
    </el-table>
    <div style=" float: right;">
      <!--分页组件-->
      <pagination/>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.add > 0"
      title="新增数据同步过滤表"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="100px">
        <el-form-item prop="dbName" label="库名称">
          <el-select v-model="form.dbName" @change="databaseNameChange" style="width: 260px">
            <el-option v-for="item in databaseList" :key="item.name" :value="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="tableName" label="表名称">
          <el-select filterable v-model="form.tableName" style="width: 260px">
            <el-option v-for="item in tableList" :key="item.tblName" :label="item.tblName" :value="item.tblName"/>
          </el-select>
        </el-form-item>
        <div class="dialog-footer" style="width:100%;text-align: center">
          <el-button @click="crud.cancelCU">关 闭</el-button>
          <el-button type="primary" @click="crud.submitCU">保 存</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, {crud, form, header, presenter} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import dataTransferFilterTableApi from '@/api/dataTransfer/common/dataTransferFilterTable'
import cdhMetadataApi from '@/api/dataTransfer/common/cdhMetadata'
// crud交由presenter持有
const defaultCrud = CRUD({
  title: '',
  url: '/api/data/transfer/table/filter/page', crudMethod: {...dataTransferFilterTableApi}
})
const defaultForm = {
  id: null,
  transferType: 'DEV',
  dbName: null,
  tableName: null
}
export default {
  name: 'DataTransferFilterTable',
  components: {rrOperation, pagination},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  props: {
    transferType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      databaseList: [],
      tableList: [],
      transferTypeList: [
        {label: '开发数据同步', value: 'DEV'},
        {label: '离线数据同步', value: 'OFFLINE'}
      ],
      rules: {
        dbName: [
          {required: true, message: '清选择库名', trigger: 'blur'}
        ],
        tableName: [
          {required: true, message: '请选择表名', trigger: 'blur'}
        ],
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    [CRUD.HOOK.beforeRefresh](crud) {
      crud.query.transferType = this.transferType
    },
    [CRUD.HOOK.beforeSubmit](crud) {
      debugger
      crud.form.transferType = this.transferType
    },
    toDelete(datas) {
      this.$confirm(`确认删除选中的${datas.length}条数据?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.crud.delAllLoading = true;
          this.crud.doDelete(datas);
        })
        .catch(() => {
        });
    },
    initData() {
      this.crud.resetQuery(true)
      cdhMetadataApi.databases().then(res => {
        this.databaseList = res
      })
    },
    databaseNameChange(databaseName) {
      this.tableList = []
      this.form.tableNameList = []
      cdhMetadataApi.tables(databaseName).then(res => {
        this.tableList = res
      })
    },
  }
}
</script>
<style scoped>

</style>
